<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    <title>首页 - 钢域云贸</title>
    <link rel="icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Custom styles for enhanced visuals */
        .chart-section {
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        .chart-section:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }
        .supplier-card {
            transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
        }
        .supplier-card:hover {
            background-color: #f9fafb;
            transform: translateX(4px);
        }
        canvas {
            max-width: 100%;
            height: auto !important;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans antialiased">
<!-- 公共头部 -->
<th:block th:replace="~{/header.html}"></th:block>

<main class="container mx-auto my-12 px-4">
    <div th:if="${isGuest}" class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-8 rounded-lg">
        <p class="font-semibold">您当前是游客身份</p>
        <p>部分功能受限，请<a th:href="@{/login}" class="text-blue-600 hover:underline">登录</a>以解锁全部功能。</p>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2 space-y-8">
            <section class="chart-section bg-white p-8 rounded-xl shadow-sm border border-gray-100">
                <h2 class="text-2xl font-bold text-gray-800 mb-6">价格趋势图</h2>
                <div class="flex flex-col space-y-8">
                    <!-- 型材价格趋势 -->
                    <div class="w-full">
                        <h3 class="text-lg font-semibold text-gray-700 mb-4 text-center">型材价格趋势</h3>
                        <canvas id="lineChart1" width="400" height="200"></canvas>
                    </div>
                    <!-- 板材价格趋势 -->
                    <div class="w-full">
                        <h3 class="text-lg font-semibold text-gray-700 mb-4 text-center">板材价格趋势</h3>
                        <canvas id="lineChart2" width="400" height="200"></canvas>
                    </div>
                    <!-- 管材价格趋势 -->
                    <div class="w-full">
                        <h3 class="text-lg font-semibold text-gray-700 mb-4 text-center">管材价格趋势</h3>
                        <canvas id="lineChart3" width="400" height="200"></canvas>
                    </div>
                </div>
            </section>
        </div>

        <section class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">供应商排行榜</h2>
            <div class="grid grid-cols-1 gap-4">
                <div th:each="supplier, iterStat : ${suppliers}" class="supplier-card flex items-center p-4 border border-gray-200 rounded-lg">
                    <!-- 排名 -->
                    <span class="text-gray-500 font-bold mr-4 text-lg" th:text="${iterStat.count}"></span>
                    <!-- 头像 -->
                    <img th:src="${supplier.logoUrl} ?: '/Uploads/placeholder.jpg'" alt="Logo" class="w-12 h-12 rounded-full mr-4 object-cover" th:if="${supplier.logoUrl != null}" />
                    <span th:unless="${supplier.logoUrl != null}" class="text-gray-400 text-sm">暂无图片</span>
                    <!-- 供应商信息 -->
                    <div>
                        <p class="text-lg font-semibold text-gray-800" th:text="${supplier.company}"></p>
                        <!-- 星级 -->
                        <div class="flex items-center">
                            <span th:if="${supplier.fullStars > 0}">
                                <i th:each="i : ${#numbers.sequence(1, supplier.fullStars)}"
                                   class="fas fa-star text-yellow-400 text-sm"></i>
                                <i th:if="${supplier.hasHalfStar}" class="fas fa-star-half-alt text-yellow-400 text-sm"></i>
                            </span>
                            <span th:unless="${supplier.averageRating == 0.0}" class="ml-2 text-gray-600 text-sm"
                                  th:text="${#numbers.formatDecimal(supplier.averageRating, 1, 1)}"></span>
                        </div>
                    </div>
                </div>
                <div th:if="${#lists.isEmpty(suppliers)}" class="col-span-3 text-center text-gray-500 p-4">
                    暂无供应商排行数据
                </div>
            </div>
        </section>
    </div>

    <section class="chart-section bg-white p-6 rounded-xl shadow-sm border border-gray-100 mt-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">库存分布图</h2>
        <div class="flex flex-col md:flex-row md:space-x-8 space-y-6 md:space-y-0 justify-center items-center">
            <!-- 型材 -->
            <div class="w-full md:w-1/3 text-center">
                <h3 class="text-lg font-semibold text-gray-700 mb-4">型材</h3>
                <canvas id="pieChart1" width="200" height="150"></canvas>
            </div>
            <!-- 板材 -->
            <div class="w-full md:w-1/3 text-center">
                <h3 class="text-lg font-semibold text-gray-700 mb-4">板材</h3>
                <canvas id="pieChart2" width="200" height="150"></canvas>
            </div>
            <!-- 管材 -->
            <div class="w-full md:w-1/3 text-center">
                <h3 class="text-lg font-semibold text-gray-700 mb-4">管材</h3>
                <canvas id="pieChart3" width="200" height="150"></canvas>
            </div>
        </div>
    </section>
</main>

<!-- 公共底部 -->
<th:block th:replace="~{/footer.html}"></th:block>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script th:inline="javascript">
    /*<![CDATA[*/

    // 库存分析饼图数据
    const chartData1 = /*[[${category1Data}]]*/ [];
    const chartData2 = /*[[${category2Data}]]*/ [];
    const chartData3 = /*[[${category3Data}]]*/ [];
    console.log("chartData1:", chartData1);
    console.log("chartData2:", chartData2);
    console.log("chartData3:", chartData3);

    function renderPieChart(ctxId, data) {
        if (!data || data.length === 0) {
            console.warn("No data available for " + ctxId);
            return;
        }
        console.log("Rendering chart for " + ctxId + " with data:", data);
        new Chart(document.getElementById(ctxId), {
            type: 'pie',
            data: {
                labels: data.map(d => d.region),
                datasets: [{
                    label: '库存占比',
                    data: data.map(d => d.percentage),
                    backgroundColor: ['#918cee', '#6EE7B7', '#FCD34D', '#FCA5A5', '#D1D5DB'],
                    borderColor: '#ffffff',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        display: true,
                        labels: {
                            font: {
                                size: 14,
                                family: 'sans-serif'
                            },
                            padding: 20,
                            boxWidth: 20,
                            usePointStyle: true
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        bodyFont: {
                            size: 14
                        },
                        callbacks: {
                            label: function (context) {
                                return context.label + ': ' + context.formattedValue + ' %';
                            }
                        }
                    }
                }
            }
        });
    }

    renderPieChart('pieChart1', chartData1);
    renderPieChart('pieChart2', chartData2);
    renderPieChart('pieChart3', chartData3);

    // 价格趋势折线图数据
    const priceTrendData1 = /*[[${priceTrend1Data}]]*/ [];
    const priceTrendData2 = /*[[${priceTrend2Data}]]*/ [];
    const priceTrendData3 = /*[[${priceTrend3Data}]]*/ [];
    console.log("priceTrendData1:", priceTrendData1);
    console.log("priceTrendData2:", priceTrendData2);
    console.log("priceTrendData3:", priceTrendData3);

    function renderLineChart(ctxId, data) {
        if (!data || data.length === 0) {
            console.warn("No data available for " + ctxId);
            return;
        }
        console.log("Rendering line chart for " + ctxId + " with data:", data);

        const regions = [...new Set(data.map(d => d.region))];
        const dates = [...new Set(data.map(d => d.date))].sort();
        const datasets = regions.map(region => {
            const regionData = data.filter(d => d.region === region);
            return {
                label: region,
                data: dates.map(date => {
                    const record = regionData.find(d => d.date === date);
                    return record ? record.avgPrice : null;
                }),
                borderColor: region === '华东' ? '#918cee' : region === '华北' ? '#9de5cd' : '#dec499',
                backgroundColor: region === '华东' ? 'rgba(79, 70, 229, 0.1)' : region === '华北' ? 'rgba(16, 185, 129, 0.1)' : 'rgba(245, 158, 11, 0.1)',
                fill: true,
                tension: 0.4,
                pointRadius: 3,
                pointHoverRadius: 6,
                borderWidth: 2
            };
        });

        new Chart(document.getElementById(ctxId), {
            type: 'line',
            data: {
                labels: dates,
                datasets: datasets
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 14,
                                family: 'sans-serif'
                            },
                            padding: 20
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        bodyFont: {
                            size: 14
                        },
                        callbacks: {
                            label: function (context) {
                                return context.dataset.label + ': ' + context.formattedValue + ' 元';
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: '日期',
                            font: {
                                size: 14,
                                weight: 'bold'
                            }
                        },
                        grid: {
                            display: false
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: '平均价格 (元)',
                            font: {
                                size: 14,
                                weight: 'bold'
                            }
                        },
                        beginAtZero: false,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    }
                }
            }
        });
    }

    renderLineChart('lineChart1', priceTrendData1);
    renderLineChart('lineChart2', priceTrendData2);
    renderLineChart('lineChart3', priceTrendData3);
    /*]]>*/
</script>

</body>
</html>